<template>
  <div style="margin-top: 20px;">
    <ul class="scrollable-list" @mouseenter="stopScroll" @mouseleave="startScroll">
      <li v-for="item in list" :key="item.id" style="height: 40px;font-size: 19px; ">{{ item.city }}: {{ item.event }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 初始化 cityEvents
    cityEvents:[
    { id: 1, city: '北京', event: '举办大型国际艺术展览' },
    { id: 2, city: '上海', event: '新的科技园区正式开园' },
    { id: 3, city: '广州', event: '传统美食节盛大开幕' },
    { id: 4, city: '深圳', event: '科技创新大赛圆满结束' },
    { id: 5, city: '成都', event: '音乐节吸引众多乐迷' },
    { id: 6, city: '杭州', event: '电商峰会成功举办' },
    { id: 7, city: '武汉', event: '樱花季吸引大量游客' },
    { id: 8, city: '南京', event: '历史文化展览备受关注' },
    { id: 9, city: '西安', event: '古城墙举办灯光秀' },
    { id: 10, city: '重庆', event: '洪崖洞成为热门打卡地' },
    { id: 11, city: '北京', event: '国际马拉松赛事顺利举行' },
    { id: 12, city: '上海', event: '世界顶级交响乐团演出' },
    { id: 13, city: '广州', event: '年度汽车展览会' },
    { id: 14, city: '深圳', event: '国际电子竞技比赛' },
    { id: 15, city: '成都', event: '火锅文化节展示地方特色' },
    { id: 16, city: '杭州', event: '西湖龙井茶文化节' },
    { id: 17, city: '武汉', event: '长江大桥夜景摄影比赛' },
    { id: 18, city: '南京', event: '纪念历史事件专题讲座' },
    { id: 19, city: '西安', event: '唐代文物特展' },
    { id: 20, city: '重庆', event: '山城步道健行活动' },
    { id: 21, city: '北京', event: '冬季冰雪节启动' },
    { id: 22, city: '上海', event: '时尚周展现最新潮流' },
    { id: 23, city: '广州', event: '国际花卉展览' },
    { id: 24, city: '深圳', event: '创业创新论坛' },
    { id: 25, city: '成都', event: '熊猫基地新生宝宝见面会' },
    { id: 26, city: '杭州', event: '互联网+教育研讨会' },
    { id: 27, city: '武汉', event: '东湖绿道骑行挑战' },
    { id: 28, city: '南京', event: '民间工艺作品展' },
    { id: 29, city: '西安', event: '丝绸之路文化论坛' },
    { id: 30, city: '重庆', event: '麻辣美食挑战赛' }
],
      list: [],
      scrollInterval: null,
      scrollSpeed: 1
    };
  },
 props:{
      receivecity:{
          type:String,
          default:''
      }
 },
 watch: {
receivecity(newVal) {
  if (newVal) {
    this.updateCityEvents(newVal);
  }
}
},
methods: {
      //根据获取到的城市过滤列表城市
      updateCityEvents(city) {
  // 根据城市过滤事件列表
  const filteredEvents =  this.cityEvents.filter(item => item.city === city);
  this.list = filteredEvents;
  this.startScroll(); // 重新开始滚动
},
      // 启用自动滚动
    startScroll() {
      this.scrollInterval = setInterval(() => {
          // 获取dom元素
        const listElement = document.querySelector('.scrollable-list');
        if (listElement.scrollTop + listElement.clientHeight < listElement.scrollHeight) {
          listElement.scrollTop += this.scrollSpeed;
        } else {
          listElement.scrollTop = 0;
        }
      }, 20);
    },
    stopScroll() {
      clearInterval(this.scrollInterval);
    }
  },
   mounted() {
    // 初始显示所有事件
    this.list = this.cityEvents;
    this.startScroll();
  },
  //挂载清除定时器，防止内存泄漏
  beforeDestroy() {
    this.stopScroll();
  }
};
</script>

<style scoped>
.scrollable-list {
  height: 200px;
  overflow-y: hidden;
  position: relative;
}

.scrollable-list li {
  line-height: 20px;
}
</style>    